<template>
	<view class="login">
		<view class="login-logo">
			<view class="bigtitle">无人售货</view>
			<view class="smalltitle">商品管理系统</view>
		</view>
		<view class="base">
			<view class="phonenumber"><input type="number" placeholder="请输入手机号" v-model="mobile"></view>
			<view class="pwd"><input type="password" placeholder="请输入密码" v-model='password'></view>
			<view class="forget" href="#" @click='onRefreshPwd'>忘记密码？</view>
			<view class="login-botton"><button @click="onLogin">登录</button></view>
			<view class="register">没有账号？<text @click='onRegister'>注册</text></view>
			<view class="separator">
				<view class="hr">

				</view>
				<view class="separator-text">
					其他登录方式
				</view>
			</view>
			<view class="option-login">
				<image src="@/static/images/antFill-wechat.png" mode=""></image>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		login
	} from '@/api/login'

	export default {
		data() {
			return {
				mobile: '',
				password: ''
			}
		},
		methods: {
			onRegister() {
				this.$tab.navigateTo('/pages/mine/login/register')
			},
			onRefreshPwd() {
				this.$tab.navigateTo('/pages/mine/login/refreshPwd')
			},
			onLogin() {
				if (this.mobile.length !== 11 || this.password == '') return this.$modal.msgError(
					'请认真检查信息')
				const data = {
					mobile: this.mobile,
					password: this.password
				}
				this.$store.dispatch('Login', data).then(res => {
					if (res == 200) {
						uni.setStorageSync("accountNumber", data)
						this.$modal.msgSuccess('登陆成功')
						setTimeout(() => {
							this.$modal.hideMsg()
							this.$tab.switchTab('/pages/mine/index')
						}, 1000)
					} else {
						this.$modal.msgError('数据请求失败')
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		margin: 0;
		padding: 0;
		font-family: SourceHanSansSC-medium;
		background-color: #fff;
	}

	.login {
		.login-logo {
			width: 660rpx;
			height: 280rpx;
			background: url('@/static/logo .png') center center/660rpx 280rpx no-repeat;

			.bigtitle {
				width: 100%;
				height: 140rpx;
				padding-top: 40rpx;
				color: rgba(79, 141, 247, 1);
				font-size: 96rpx;
				text-align: right;

			}

			.smalltitle {
				width: 100%;
				height: 100rpx;
				color: rgba(144, 141, 141, 1);
				margin-top: 20rpx;
				margin-left: 20rpx;
				font-size: 72rpx;
				text-align: right;
				font-family: SourceHanSansSC-regular;
			}

		}
	}

	.base {
		width: 600rpx;
		margin: 0 auto;

		.phonenumber,
		.pwd {

			input {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 90rpx;
				padding-left: 30rpx;
				border-radius: 50rpx;
				background-color: rgba(216, 232, 249, 1);
				font-size: 32rpx;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
			}
		}

		.pwd {
			input {
				margin-top: 70rpx;
			}
		}

		.forget {
			width: 120rpx;
			height: 34rpx;
			color: rgba(79, 141, 247, 1);
			font-size: 24rpx;
			margin: 40rpx 20rpx;
			line-height: 34rpx;
		}

		.login-botton {
			button {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				background-color: rgba(101, 168, 242, 1);
				margin-top: 60rpx;
				color: rgba(255, 255, 255, 1);
				font-size: 32rpx;
				text-align: center;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
			}
		}

		.register {
			width: 100%;
			display: flex;
			justify-content: center;
			height: 40rpx;
			color: rgba(145, 145, 145, 1);
			font-size: 28rpx;
			margin-top: 40rpx;

			text {
				color: rgba(79, 141, 247, 1);
				font-size: 32rpx;
			}
		}

		.separator {
			position: relative;

			margin-top: 100rpx;
			width: 100%;
			height: 40rpx;
			text-align: center;

			.separator-text {
				position: relative;
				width: 200rpx;
				margin: auto;
				color: rgba(145, 145, 145, 0.97);
				font-size: 28rpx;
				background-color: #fff;
				z-index: 10;
			}

			.hr {
				position: absolute;
				top: 20rpx;
				width: 100%;
				border-top: 4rpx solid #ccc;
				z-index: 5;
			}
		}

		.option-login {
			width: 100%;
			text-align: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin: 30rpx 0;
			}
		}
	}
</style>
